import { NavBar, SearchBar, Toast } from 'antd-mobile';
import './index.less';
import { useNavigate } from 'react-router-dom';
import { EnvironmentOutline, AlipayCircleFill } from 'antd-mobile-icons'

const Pay = () => {

  const navigate = useNavigate();

  const back = () => {
    navigate('/cart');
  };

  return <div class="pay">
    <van-nav-bar fixed title="订单结算台" left-arrow />
    <NavBar backArrow={true} onBack={back}>订单结算台</NavBar>

    {/* 地址相关  */}
    <div class="address">

      <div class="left-icon">
        <EnvironmentOutline fontSize={24} />
      </div>

      <div class="info" v-if="true">
        <div class="info-content">
          <span class="name">小红</span>
          <span class="mobile">13811112222</span>
        </div>
        <div class="info-address">
          江苏省 无锡市 南长街 110号 504
        </div>
      </div>

      <div class="info" v-else>
        请选择配送地址
      </div>

      <div class="right-icon">
        <van-icon name="arrow" />
      </div>
    </div>

    {/* 订单明细  */}
    <div class="pay-list">
      <div class="list">
        <div class="goods-item">
          <div class="left">
            <img src="http://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="" />
          </div>
          <div class="right">
            <p class="tit text-ellipsis-2">
              三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
            </p>
            <p class="info">
              <span class="count">x3</span>
              <span class="price">¥9.99</span>
            </p>
          </div>
        </div>
      </div>

      <div class="flow-num-box">
        <span>共 12 件商品，合计：</span>
        <span class="money">￥1219.00</span>
      </div>

      <div class="pay-detail">
        <div class="pay-cell">
          <span>订单总金额：</span>
          <span class="red">￥1219.00</span>
        </div>

        <div class="pay-cell">
          <span>优惠券：</span>
          <span>无优惠券可用</span>
        </div>

        <div class="pay-cell">
          <span>配送费用：</span>
          <span v-if="false">请先选择配送地址</span>
          <span v-else class="red">+￥0.00</span>
        </div>
      </div>

      {/* 支付方式  */}
      <div class="pay-way">
        <span class="tit">支付方式</span>
        <div class="pay-cell">
          <span><AlipayCircleFill color='var(--adm-color-primary)' />余额支付（可用 ¥ 999919.00 元）</span>
          <span>请先选择配送地址</span>
          <span class="red"><van-icon name="passed" /></span>
        </div>
      </div>

      {/* 买家留言  */}
      <div class="buytips">
        <textarea placeholder="选填：买家留言（50字内）" name="" id="" cols="30" rows="10"></textarea>
      </div>
    </div>

    {/* 底部提交  */}
    <div class="footer-fixed">
      <div class="left">实付款：<span>￥999919</span></div>
      <div class="tipsbtn">提交订单</div>
    </div>
  </div>
};

export default Pay;